<template>
  <div class="beforlogin">
    <van-swipe
      @change="onChange"
      class="swipe"
      :loop="false"
      :show-indicators="roundShow"
    >
      <van-swipe-item v-for="(item, index) in mydata" :key="index">
        <div class="logo">
          <transition name="logoImg">
            <img v-if="item.isShow" :src="item.img" alt="" />
          </transition>
        </div>
        <transition name="cont">
          <div class="content" v-if="item.isShow">
            <h1>胖虎<span>头条</span></h1>
            <p>{{ item.ptext }}</p>
          </div>
        </transition>
        <div class="footer">
          <van-button
            v-if="item.btn"
            round
            plain
            type="info"
            @click="$router.push('/login')"
            >立即体验</van-button
          >
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data () {
    return {
      roundShow: true,
      mydata: [
        {
          img: require('@/assets/images/beforlogin1.png'),
          ptext: '热爱分享的程序员',
          isShow: false,
          btn: false
        },
        {
          img: require('@/assets/images/beforlogin2.png'),
          ptext: '关心技术的技术宅',
          isShow: false,
          btn: false
        },
        {
          img: require('@/assets/images/beforlogin3.png'),
          ptext: '技术热点的追求者',
          isShow: false,
          btn: true
        }
      ]
    }
  },
  methods: {
    onChange (index) {
      this.roundShow = !(index === 2)
      this.mydata.forEach((item, i) => {
        if (i === index) {
          item.isShow = true
        } else {
          item.isShow = false
        }
      })
    }
  },
  mounted () {
    this.mydata[0].isShow = true
  }
}
</script>

<style lang="less" scoped>
.beforlogin {
  .swipe {
    height: 667px;
    /deep/ .van-swipe__indicators {
      bottom: 40px;
    }
  }
  .logo {
    position: relative;
    width: 100%;
    height: 400px;
    img {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 33px;
      margin: auto;
      width: 218px;
      height: 174px;
    }
  }
  .content {
    text-align: center;
    h1 {
      font-weight: 400;
      font-size: 25px;
      margin-bottom: 9px;
      span {
        color: #4aa2fb;
      }
    }
    p {
      font-size: 20px;
      color: #666;
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 62px;
    width: 100%;
    .van-button {
      position: absolute;
      right: 124px;
      top: 0;
      width: 130px;
      height: 31px;
    }
  }
  .logoImg-enter {
    transform: translateY(-40px);
    opacity: 0;
  }

  .cont-enter {
    transform: translateY(40px);
    opacity: 0;
  }

  .logoImg-enter-active,
  .cont-enter-active {
    transition: 0.5s all;
  }

  .logoImg-enter-to,
  .cont-enter-to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
